<head>
    <title>work_subject</title>
    <#include "/sys/newheader.html"/>
    <link rel="stylesheet"  href=${base}/statics/plugins/layout/jquery.layout-latest.css?_${.now?string['yyyyMMddhhmmSS']}">
    <script src="${base}/statics/plugins/layout/jquery.layout-latest.js?_${.now?string['yyyyMMddhhmmSS']}"></script>
</head>
<div class="ui-layout-west" id="rrapp">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 作业树
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool"  title="专题管理" @click="editSubject"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开"  v-show="!expandFlag" @click="expandAll(true)">
                        <i class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠" v-show="expandFlag" @click="expandAll(false)"><i
                            class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新" @click="initialZtree"><i
                            class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="workTree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <iframe id="mainFrame" name="mainFrame" class="ui-layout-content p0"
            src="/work/work.html"></iframe>
</div>
<script>
    // 初始化布局
    $(document).ready(function () {
        $('body').layout({west__size: 180});
    });
    var win = $("#mainFrame")[0].contentWindow;
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: -1,
                type: "type"
            },
            key: {
                url: "nourl"
            }
        },
        check: {
            enable: true,
            nocheckInherit: true
        },
        callback:{
            beforeClick: function(treeId, treeNode){
            },
            onClick:function(event, treeId, treeNode){
                ztree.expandNode(treeNode);
                if(treeNode.type=="workSubject"){
                    var subjectId = treeNode.id.replace("workSubject_","");
                    $("#mainFrame").attr("src","/work/work.html?isShowCond=true&subjectId="+subjectId);
                }else if(treeNode.type=="work"){
                    var workId = treeNode.id.replace("work_","");
                    var subjectId = treeNode.parentId.replace("workSubject_","");
                    $("#mainFrame").attr("src","/work/workItem.html?isShowCond=true&subjectId="+subjectId+"&workId="+workId);
                }
            }
        }
    };
    var ztree;

    function showAllNode(nodes) {
        nodes = ztree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].getParentNode() != null) {
                ztree.expandNode(nodes[i], false, false, false, false);
            } else {
                ztree.expandNode(nodes[i], true, true, false, false);
            }
            ztree.showNode(nodes[i]);
            showAllNode(nodes[i].children);
        }
    }


    function hideAllNode(nodes) {
        nodes = ztree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            ztree.hideNode(nodes[i]);
        }
    }

    function updateNodes(nodeList) {
        ztree.showNodes(nodeList);
        for (var i = 0, l = nodeList.length; i < l; i++) {
            var treeNode = nodeList[i];
            showChildren(treeNode);
            showParent(treeNode)
        }
    }

    function showChildren(treeNode) {
        if (treeNode.isParent) {
            for (var idx in treeNode.children) {
                var node = treeNode.children[idx];
                ztree.showNode(node);
                showChildren(node);
            }
        }
    }

    function showParent(treeNode) {
        var parentNode;
        while ((parentNode = treeNode.getParentNode()) != null) {
            ztree.showNode(parentNode);
            ztree.expandNode(parentNode, true, false, false);
            treeNode = parentNode;
        }
    }



    var vm = new Vue({
        el: '#rrapp',
        data: {
            zNodes: [],
            expandFlag:false
        },
        mounted: function () {
            //加载作业树
            this.initialZtree();
        },
        methods: {
            initialZtree: function () {
                $.get("../work/workTreelist", function (outJson) {
                    vm.zNodes = outJson.resData;
                    ztree = $.fn.zTree.init($("#workTree"), setting, vm.zNodes);
                })

            },
            expandAll:function (expand) {
                ztree.expandAll(expand);
                vm.expandFlag = expand;
            },
            editSubject:function () {
                location.href = "workSubject.html";
            }

        }
    });
</script>